<script>
</script>
<body onselectstart=" false">
    <div nz-row style="height: 8%;">

      <div nz-col nzSpan="6">
        <div>
          <div class="unit">{{unit}}</div>
          <button nz-button nzType="default" (click)="queryAllJX()" style="position: fixed;top: 60%;width: 1%;height: 8%;z-index: 10;text-align: center;
          border-top-right-radius: 10px;border-bottom-right-radius: 10px;background-color: #93cfcf;"><div style="writing-mode: tb-rl;left: 0;position: absolute;top: 35%;">入库</div></button>
        
        </div>
        
        <button nzType="default" (click)="resetZNLC()" style="position: absolute;left: 70%;top: 30%;">重置料仓</button>
      </div>

      <div nz-col nzSpan="12">
        <!-- <img style="display: inline-block; width: 80%; vertical-align: middle; overflow: hidden; " src="assets/title.svg"> -->
        <span class="title">{{title}}</span>
      </div>

      <div nz-col nzSpan="6">
        <div class="modos">开箱模式</div>
        <div class="toggle" *ngIf="!isShow">
          <div class="modoi" id="kxms" (click)="swtichUnpackingModel()" style="color: #fa2408">手动</div>
       </div>
        <div class="toggle" *ngIf="isShow">
          <div class="modoi" id="kxms" (click)="swtichUnpackingModel()" style="color: #0ee70e">自动</div>
       </div>
       
      </div>
    </div>
  <!-- 第一行 -->
  <!-- <div>
    <div *ngFor="let item of 12 let l=index">
      <div *ngIf="item === 1">{{item}}</div>
      <div></div>
    </div>
  </div> -->
    <div style="position: relative; height: 13%; margin: 0 auto;width: 94%;">
      <img src="assets/边界框.png" style="width: 100%;z-index: -1;height: 100%;position: absolute;">
      <!-- <div style="position:absolute; border:rgba(112, 106, 106, 0.753) 2px solid;background:#CADEF5; font-size: 20px;
      line-height: 35px;width: 15%;height: 35%;z-index: 1;">
      <div class="right" id="left">{{left}}</div>
      <span style="position:relative;;left: 50%;" id="leftName">{{leftName}}</span>
      </div> -->
      <span style="position:relative;left: 45%;top: 8%;width: 10%;height: 15%;display: inline-block;text-align: center" id="leftName">{{leftName}}</span>
      <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="6">
          <div>
            <button class="color" style="background: #10B568; box-shadow: inset -4px 4px 6px rgba(0, 0, 0, 0.2);"  (click)="dialog('1')" id="color0">
              <div class="num" id="A0">00</div>
              <div class="blink" style="left: 10%;position: absolute;">{{N0}}</div>
            </button>
          </div>
        </div>
        <div nz-col [nzSpan]="6">
          <div>
            <!-- <div class="bea_f">平衡轴</div> -->
            <button class="color" style="background: #051E48; box-shadow: inset -4px 4px 6px rgba(0, 0, 0, 0.2); border-radius: 2px;" (click)="dialog('2')" id="color1">
              <div class="num" id="A1">00</div>
              <div class="blink" style="left: 10%;position: absolute;">{{N1}}</div>
            </button>
          </div>
        </div>

          <div nz-col [nzSpan]="6">
            <div>
              <!-- <div class="bea_f">平衡轴</div> -->
              <button class="color" style="background: #941010; box-shadow: inset -4px 4px 6px rgba(0, 0, 0, 0.2); border-radius: 2px;" (click)="dialog('3')" id="color2">
                <div class="num" id="A2">00</div>
                <div class="blink" style="left: 10%;position: absolute;">{{N2}}</div>
              </button>
            </div>
          </div>
          <div nz-col [nzSpan]="6">
            <div>
              <!-- <div class="bea_f">平衡轴</div> -->
              <button class="color" style="background: #FFAB00; box-shadow: inset -4px 4px 6px rgba(0, 0, 0, 0.2); border-radius: 2px;" (click)="dialog('4')" id="color3">
                <div class="num" id="A3">00</div>
                <div class="blink" style="left: 10%;position: absolute;">{{N3}}</div>
              </button>
            </div>
          </div>
      </div>
    </div>
    <div style="height: 2%;"></div>
<!-- 第二行 -->
<div style="position: relative; height: 13%; margin: 0 auto;width: 94%;">
  <img src="assets/边界框.png" style="width: 100%;z-index: -1;height: 100%;position: absolute;">
  <!-- <div style="position:absolute; border:rgba(112, 106, 106, 0.753) 2px solid;background:#CADEF5; font-size: 20px;
  line-height: 35px;width: 15%;height: 35%;z-index: 1;">
  <div class="right" id="left">{{left}}</div>
  <span style="position:relative;;left: 50%;" id="leftName">{{leftName}}</span>
  </div> -->
  <span style="position:relative;left: 45%;top: 8%;width: 10%;height: 15%;display: inline-block;text-align: center" id="rightName">{{rightName}}</span>
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="6">
      <div>
        <button class="color" style="background: #10B568; box-shadow: inset -4px 4px 6px rgba(0, 0, 0, 0.2); border-radius: 2px;"  (click)="dialog('5')" id="color4">
          <div class="num" id="A4">00</div>
          <div class="blink" style="left: 10%;position: absolute;">{{N4}}</div>
        </button>
      </div>
    </div>
    <div nz-col [nzSpan]="6">
      <div>
        <!-- <div class="bea_f">平衡轴</div> -->
        <button class="color" style="background: #051E48; box-shadow: inset -4px 4px 6px rgba(0, 0, 0, 0.2); border-radius: 2px;" (click)="dialog('6')" id="color5">
          <div class="num" id="A5">00</div>
          <div class="blink" style="left: 10%;position: absolute;">{{N5}}</div>
        </button>
      </div>
    </div>

      <div nz-col [nzSpan]="6">
        <div>
          <!-- <div class="bea_f">平衡轴</div> -->
          <button class="color" style="background: #941010; box-shadow: inset -4px 4px 6px rgba(0, 0, 0, 0.2); border-radius: 2px;" (click)="dialog('7')" id="color6">
            <div class="num" id="A6">00</div>
            <div class="blink" style="left: 10%;position: absolute;">{{N6}}</div>
          </button>
        </div>
      </div>
      <div nz-col [nzSpan]="6">
        <div>
          <!-- <div class="bea_f">平衡轴</div> -->
          <button class="color" style="background: #FFAB00; box-shadow: inset -4px 4px 6px rgba(0, 0, 0, 0.2); border-radius: 2px;" (click)="dialog('8')" id="color7">
            <div class="num" id="A7">00</div>
            <div class="blink" style="left: 10%;position: absolute;">{{N7}}</div>
          </button>
        </div>
      </div>
  </div>
</div>

    <div nz-row [nzGutter]="2"  style="height: 10%;">
      <div nz-col [nzSpan]="12">
        <div class="nameA">{{leftName}}</div>
        <div class="tableA" id="phzzw"></div>
      </div>
      <div nz-col [nzSpan]="12">
        <div class="nameA">{{rightName}}</div>
        <div class="tableA" id="qzzw"></div>
      </div>
    </div>

    <div nz-row style="height: 7%;">
      <div nz-col [nzSpan]="4">
        <!-- <div class="barcode1">条码1_曲轴箱体:</div> -->
        <img class="barcode" src="assets/barcode1.svg">
      </div>
      <div nz-col [nzSpan]="20">
        <div class="table1" id="tm0">无数据</div>
      </div>
    </div>
    <div nz-row style="height: 7%;">
      <div nz-col [nzSpan]="4">
        <!-- <div class="barcode1">条码2_曲轴总成:</div> -->
        <img class="barcode" src="assets/barcode2.svg">
      </div>
        <div nz-col [nzSpan]="20">
        <div class="table1" id="tm1">无数据</div>
      </div>
    </div>
    <div nz-row style="height: 7%;">
      <div nz-col [nzSpan]="4">
        <!-- <div class="barcode1">条码3_平衡轴总成:</div> -->
        <img class="barcode" src="assets/barcode3.svg">
      </div>
        <div nz-col [nzSpan]="20">
        <div class="table1" id="tm2">无数据</div>
      </div>
    </div>
    <div nz-row style="height: 7%;">
      <div nz-col [nzSpan]="4">
        <!-- <div class="barcode1">条码4_连杆（左）:</div> -->
        <img class="barcode" src="assets/barcode4.svg">
      </div>
        <div nz-col [nzSpan]="20">
        <div class="table1" id="tm3"></div>
      </div>
    </div>
    <div nz-row style="height: 7%;">
      <div nz-col [nzSpan]="4">
        <!-- <div class="barcode1">条码5_连杆（右）:</div> -->
        <img class="barcode" src="assets/barcode5.svg">
      </div>
        <div nz-col [nzSpan]="20">
        <div class="table1" id="tm4"></div>
      </div>
    </div>
    <div nz-row style="height: 10%;">
      <div nz-col [nzSpan]="24">
        <div class="message" id="log0">正在连接到WMS后台服务器。。。</div>
      </div>
    </div>
    <div nz-row [nzGutter]="24" style="height: 8%;padding: 0% 0.5% 0% 3.5%">
      <div nz-col [nzSpan]="4">
        <button class="logbutton" (click)="loginfo()">查看日志</button>
      </div>
      <div nz-col [nzSpan]="4" >
        <button class="downbutton" (click)="Close()" style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%), linear-gradient(180deg, #eb2222 0%, #ee1313 58.85%, #f01212 100%);">关箱</button>
      </div>
      <div nz-col [nzSpan]="4">
        <button class="downbutton"
        (click)="Rerequested()"
        style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%), linear-gradient(180deg, #FFA83E 0%, #EE8013 58.85%, #D96800 100%);"
        >重新请求</button>
      </div>

      <div nz-col [nzSpan]="4">
        <button class="downbutton" (click)="cleanAll()" style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #399DFF 0%, #0D78E1 61.46%, #297DCF 100%);">全部清仓</button>
      </div>
      <div nz-col [nzSpan]="4">
        <button class="downbutton" (click)="manual()" style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 59.38%), linear-gradient(180deg, #3DB96D 0%, #1B904E 100%);">手动开箱</button>
      </div>
      <div nz-col [nzSpan]="4">
        <button class="quit" (click)="full()">全屏</button>
      </div>

    </div>

    <!-- 弹窗代码 -->
    <!-- 颜色框功能选择弹窗
    style=" background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 59.38%), linear-gradient(180deg, #3DB96D 0%, #1B904E 100%);"
            -->
    <nz-modal  [(nzVisible)]="functionmenu" nzTitle="功能选择" (nzOnCancel)="handleCancel()" [nzOkText]=null nzWidth=40% nzCentered>
      <ng-container *nzModalContent>
        <div nz-row style="height: 100px;">
          <!-- <div nz-col nzSpan="8">
            <button class="function"
            (click)="addware()"
            [style.background]="rkan ?  'linear-gradient(180deg, #D3D3D3 0%, #B1B1B1 70.83%, #C0C0C0 100%)' : 'radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 59.38%), linear-gradient(180deg, #3DB96D 0%, #1B904E 100%)'"
            [disabled] = "rkan"
            >入库</button>
          </div> -->
          <div nz-col nzSpan="12"><button class="function"
            (click)="addinventory()"
            style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #F43E3E 0%, #CD2626 59.37%, #EB2424 100%);"
            >补料</button></div>
          <div nz-col nzSpan="12"><button class="function"
            (click)="cleanThis()"
            style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #399DFF 0%, #0D78E1 61.46%, #297DCF 100%); "
            >清仓</button></div>
        </div>
      </ng-container>
      <div *nzModalFooter>
        <div nz-row style="height: 30px;">
          <div nz-col nzSpan="6"></div>
          <div nz-col nzSpan="6"></div>
          <div nz-col nzSpan="6">
          </div>
          <div nz-col nzSpan="6">
            <button nz-button nzType="default" (click)="handleCancel()">关闭</button>
          </div>
        </div>
      </div>
    </nz-modal>
    <!-- 入库弹窗-基于功能选择弹窗 -->
    <nz-modal [(nzVisible)]="Warehousing" nzTitle="入库" (nzOnCancel)="handleCancel()" [nzOkText]=null nzWidth=50% nzCentered nzMaskClosable=false>
      <ng-container *nzModalContent>
        <form nz-form [formGroup]="validateForm">
          <!-- <nz-form-item>
            <nz-form-label
              [nzSm]="6"
              [nzXs]="24"
              nzFor="Code"
              nzRequired
            >
              <span style="left: 0%;">扫描条码</span>
            </nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <input nz-input id="Code" formControlName="Code" class="input" auto-focus autocomplete="off" (click)="clearCode()" (ngModelChange)="codeChange()"/>

            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label
              [nzSm]="6"
              [nzXs]="24"
              nzFor="Sku"
              nzRequired
            >
              <span style="left: 0%;">物料编码</span>
            </nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="wareErrorTpl">

              <input nz-input id="Sku" formControlName="Sku" class="input" autocomplete="off" (click)="clearSku()"/>
              <ng-template #wareErrorTpl let-control>
                <ng-container *ngIf="control.hasError('required')">物料编码不能为空！</ng-container>
                <ng-container *ngIf="control.hasError('confirm')">入库物料与当前料仓区域内的物料不一致，请检查！</ng-container>
              </ng-template>
            </nz-form-control>
          </nz-form-item> -->
          <nz-form-item>
            <nz-form-label
              [nzSm]="6"
              [nzXs]="24"
              nzFor="Quantity"
              nzRequired
            >
              <span>输入数量</span>
            </nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="数量不能为空！">
              <input type="number" (click)="clearQuantity()" id="Quantity" formControlName="Quantity" class="input" autocomplete="off"/>
            </nz-form-control>
          </nz-form-item>
        </form>

      </ng-container>

      <div *nzModalFooter>
        <div nz-row style="height: 80px;">
          <div nz-col nzSpan="6"></div>
          <div nz-col nzSpan="6"></div>
          <div nz-col nzSpan="6">
            <button nz-button nzType="default" (click)="handleCancel()" class="okandcancle">取消</button>
          </div>
          <div nz-col nzSpan="6">
            <button nz-button nzType="primary"
            class="okandcancle"
            style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #399DFF 0%, #0D78E1 61.46%, #297DCF 100%);"
            (click)="warehousingok()"
            >确定</button>
          </div>
        </div>
      </div>
    </nz-modal>
    <!-- 补料弹窗-基于功能选择弹窗 -->
    <nz-modal [(nzVisible)]="Increaseinventory" nzTitle={{bltitle}} (nzOnCancel)="handleCancel()" [nzOkText]=null nzWidth=50% nzCentered nzMaskClosable=false>
      <ng-container *nzModalContent>

        <form nz-form [formGroup]="validateForm" >
          <nz-form-item>
            <nz-form-label
              [nzSm]="6"
              [nzXs]="24"
              nzFor="Sku"
              nzRequired
            >
              <span style="left: 0%;">物料编码</span>
            </nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="barcodeErrorTpl">
              <input id="Sku" formControlName="Sku" class="input" autocomplete="off" auto-focus (click)="clearSku()"/>
              <ng-template #barcodeErrorTpl let-control>
                <ng-container *ngIf="control.hasError('required')">物料编码不能为空！</ng-container>
                <ng-container *ngIf="control.hasError('confirm')">补料物料与当前料箱内的物料{{dqwl}}不一致！</ng-container>
              </ng-template>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label
              [nzSm]="6"
              [nzXs]="24"
              nzFor="Quantity"
              nzRequired
            >
              <span>输入数量</span>
            </nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="数量不能为空！">
              <input type="number" id="Quantity" formControlName="Quantity" class="input" autocomplete="off" (click)="clearQuantity()"/>
            </nz-form-control>
          </nz-form-item>
        </form>
      </ng-container>

      <div *nzModalFooter>
        <div nz-row style="height: 80px;">
          <div nz-col nzSpan="6"></div>
          <div nz-col nzSpan="6"></div>
          <div nz-col nzSpan="6">
            <button nz-button nzType="default" (click)="handleCancel()" class="okandcancle">取消</button>
          </div>
          <div nz-col nzSpan="6">
            <button nz-button class="okandcancle"
            style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #399DFF 0%, #0D78E1 61.46%, #297DCF 100%);"
            (click)="addMaterialok()"
            >确定</button>
          </div>
        </div>
      </div>

    </nz-modal>
    <!-- 单独清仓-基于功能选择页面 -->
    <nz-modal [(nzVisible)]="clean"  (nzOnCancel)="handleCancel()" [nzOkText]=null nzWidth=50% nzCentered>
      <ng-container *nzModalContent>
        <div nz-row style="height: 100px;">
          <div nz-col nzSpan="24"><img style="position: absolute;top: 20px;" src="assets/cleanthis.svg" ></div>
        </div>
      </ng-container>
      <div *nzModalFooter>
        <div nz-row style="height: 80px;">
          <div nz-col nzSpan="6"></div>
          <div nz-col nzSpan="6"></div>
          <div nz-col nzSpan="6">
            <button nz-button nzType="default" (click)="handleCancel()" class="okandcancle">取消</button>
          </div>
          <div nz-col nzSpan="6">
            <button nz-button nzType="primary" class="okandcancle" (click)="cleanok()" >确定</button>
          </div>
        </div>
      </div>
    </nz-modal>
    <!-- 更换机型扫描二维码弹窗 -->
    <nz-modal [(nzVisible)]="qrCodeMessage" nzTitle="扫描二维码" (nzOnCancel)="handleCancel()"  nzWidth=80% nzCentered [nzBodyStyle]="" nzMaskClosable="false">
      <ng-container *nzModalContent>
        <div>
          <div nz-row [nzGutter]="24" style="height: 480px;">
            <div nz-col nzSpan="4">
              <div style="position: absolute;top: 20%;">
                料仓二维码
              </div>
              <div style="position: absolute;top: 40%;">
                料盒二维码
              </div>
              <div style="position: absolute;top: 55%;">
                输入数量
              </div>
            </div>
            <div nz-col nzSpan="5">
              <div id="column1">
                第一列
              </div>
              <input nz-input type="text" (keyup.enter)="nextFocus(1,1)" style="position: absolute;top: 15%;height: 10%;width: 90%; background-color: #e5e2e2;" [(ngModel)]="qrMessageL1.sku">
              <input nz-input type="text" (keyup.enter)="nextFocus(1,2)" style="position: absolute;top: 35%;height: 10%;width: 90%; background-color: #e5e2e2;" [(ngModel)]="qrMessageL1.Box">
              <input nz-input type="number" (keyup.enter)="nextFocus(1,3)" style="position: absolute;top: 55%;height: 10%;width: 90%; background-color: #e5e2e2;" [(ngModel)]="qrMessageL1.qty">
            </div>
            <div nz-col nzSpan="5">
              <div id="column2">
                第二列
              </div>
              <input nz-input type="text" (keyup.enter)="nextFocus(2,1)" style="position: absolute;top: 15%;height: 10%;width: 90%; background-color: #e5e2e2;" [(ngModel)]="qrMessageL2.sku">
              <input nz-input type="text" (keyup.enter)="nextFocus(2,2)" style="position: absolute;top: 35%;height: 10%;width: 90%; background-color: #e5e2e2;" [(ngModel)]="qrMessageL2.Box">
              <input nz-input type="number" (keyup.enter)="nextFocus(2,3)" style="position: absolute;top: 55%;height: 10%;width: 90%; background-color: #e5e2e2;" [(ngModel)]="qrMessageL2.qty">
            </div>
            <div nz-col nzSpan="5">
              <div id="column3">
                第三列
              </div>
              <input nz-input type="text" (keyup.enter)="nextFocus(3,1)" style="position: absolute;top: 15%;height: 10%;width: 90%; background-color: #e5e2e2;" [(ngModel)]="qrMessageL3.sku">
              <input nz-input type="text" (keyup.enter)="nextFocus(3,2)" style="position: absolute;top: 35%;height: 10%;width: 90%; background-color: #e5e2e2;" [(ngModel)]="qrMessageL3.Box">
              <input nz-input type="number" (keyup.enter)="nextFocus(3,3)" style="position: absolute;top: 55%;height: 10%;width: 90%; background-color: #e5e2e2;" [(ngModel)]="qrMessageL3.qty">
            </div>
            <div nz-col nzSpan="5">
              <div id="column4">
                第四列
              </div>
              <input nz-input type="text" (keyup.enter)="nextFocus(4,1)" style="position: absolute;top: 15%;height: 10%;width: 90%; background-color: #e5e2e2;" [(ngModel)]="qrMessageL4.sku">
              <input nz-input type="text" (keyup.enter)="nextFocus(4,2)" style="position: absolute;top: 35%;height: 10%;width: 90%; background-color: #e5e2e2;" [(ngModel)]="qrMessageL4.Box">
              <input nz-input type="number" (keyup.enter)="nextFocus(4,3)" style="position: absolute;top: 55%;height: 10%;width: 90%; background-color: #e5e2e2;" [(ngModel)]="qrMessageL4.qty">
            </div>
          </div>
          <div class="qrclass" id="qrResult"></div>
        </div>
        <div>
          <div nz-row [nzGutter]="24" style="height: 48px;">
            <div nz-col nzSpan="5"></div>
            <div nz-col nzSpan="5">
              <button class="qrcommitButton" (click)="commitQR()" style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #399DFF 0%, #0D78E1 61.46%, #297DCF 100%);">提交</button>
            </div>
            <div nz-col nzSpan="4"></div>
            <div nz-col nzSpan="5">
              <button class="qrcommitButton" (click)="setNull()" style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #e75035 0%, #e42020 61.46%, #d82e52 100%);">清空</button>
            </div>
            <div nz-col nzSpan="5"> </div>
          </div>

        </div>

      </ng-container>
      <div *nzModalFooter>
      </div>
    </nz-modal>
    <!-- 日志弹窗 -->
    <nz-modal [(nzVisible)]="showlog" nzTitle="日志" (nzOnCancel)="handleCancel()" [nzOkText]=null nzWidth=50% nzCentered>
      <ng-container *nzModalContent>
        <!-- 设置分页大小100，不显示分页器 -->
        <nz-table #headerTable [nzData]="listOfData" [nzPageSize]="100" [nzShowPagination]="false" [nzScroll]="{ y: '600px' }">
          <thead>
            <tr>
              <th nzWidth="30%">日期</th>
              <th nzWidth="30%">操作记录</th>
              <th nzWidth="40%">MQ数据</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of headerTable.data">
              <td>{{ data.Time }}</td>
              <td>{{ data.Message }}</td>
              <td>{{ data.MQMessage }}</td>
            </tr>
          </tbody>
        </nz-table>
      </ng-container>
      <div *nzModalFooter>
        <div nz-row style="height: 30px;">
          <div nz-col nzSpan="6"></div>
          <div nz-col nzSpan="6"></div>
          <div nz-col nzSpan="6">
          </div>
          <div nz-col nzSpan="6">
            <button nz-button nzType="default" (click)="handleCancel()">关闭</button>
          </div>
        </div>
      </div>
    </nz-modal>

    <!-- 全部清仓弹窗 -->
    <nz-modal [(nzVisible)]="cleanall"  (nzOnCancel)="handleCancel()" [nzOkText]=null nzWidth=50% nzCentered>
      <ng-container *nzModalContent>
        <div nz-row style="height: 100px;">
          <div nz-col nzSpan="24"><img style="position: absolute;top: 20px;" src="assets/cleanall.svg" ></div>
        </div>
      </ng-container>
      <div *nzModalFooter>
        <div nz-row style="height: 80px;">
          <div nz-col nzSpan="6"></div>
          <div nz-col nzSpan="6"></div>
          <div nz-col nzSpan="6">
            <button nz-button nzType="default" (click)="handleCancel()" class="okandcancle">取消</button>
          </div>
          <div nz-col nzSpan="6">
            <button nz-button nzType="primary" (click)="cleanAllok()" class="okandcancle">清仓</button>
          </div>
        </div>
      </div>
    </nz-modal>
    <!-- 清仓成功弹框 -->
    <nz-modal [(nzVisible)]="cleanallok"  (nzOnCancel)="handleCancel()" [nzOkText]=null nzWidth=30% nzCentered [nzFooter]=null>
      <ng-container *nzModalContent>
        <div nz-row style="height: 70px;">
          <div nz-col nzSpan="24"><img style="position: absolute;" src="assets/cleanallok.svg" ></div>
        </div>
      </ng-container>
    </nz-modal>
    <!-- PLC错误 -->
    <nz-modal [(nzVisible)]="plcError"  (nzOnCancel)="handleCancel()" [nzOkText]=null nzWidth=30% nzCentered [nzFooter]=null>
      <ng-container *nzModalContent>
        <div nz-row style="height: 70px;">
          <div nz-col nzSpan="24">PLC错误，料仓未关闭</div>
        </div>
      </ng-container>
    </nz-modal>
    <!-- 重新请求确认 -->
    <nz-modal [(nzVisible)]="RequestConfirm"  (nzOnCancel)="handleCancel()" [nzOkText]=null nzWidth=50% nzCentered>
      <ng-container *nzModalContent>
        <div nz-row style="height: 100px;">
          <div nz-col nzSpan="4"><img style="position: absolute; size: 90%; height: 90%;" src="assets/警示.svg" ></div>
          <div nz-col nzSpan="20"><span style="position: absolute; font-size: 32px; line-height: 44px;top: 25%;">该操作将重新请求出库任务，是否继续？</span></div>
        </div>
      </ng-container>
      <div *nzModalFooter>
        <div nz-row style="height: 80px;">
          <div nz-col nzSpan="6"></div>
          <div nz-col nzSpan="6"></div>
          <div nz-col nzSpan="6">
            <button nz-button nzType="default" (click)="handleCancel()" class="okandcancle">否</button>
          </div>
          <div nz-col nzSpan="6">
            <button nz-button nzType="primary" (click)="RequestConfirmOK()" class="okandcancle">是</button>
          </div>
        </div>
      </div>
    </nz-modal>
    <!-- 清仓换料弹窗--清仓 -->
    <nz-modal [(nzVisible)]="hlqcPage" nzTitle="换料前清仓操作" (nzOnCancel)="handleCancel()" [nzOkText]=null nzWidth=50% nzCentered nzMaskClosable=false>
      <ng-container *nzModalContent>
        <div style="height: 200px;text-align: center;line-height:200px;font-size: 30px;">
          请
          <span style="font-size: 40px; color:#CD2626">取出</span>全部料盒后点击【关闭料箱】按钮!
      </div>
      </ng-container>

      <div *nzModalFooter>
        <div nz-row style="height: 80px;">
          <button nz-button class="okandcancle"
          style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #399DFF 0%, #0D78E1 61.46%, #297DCF 100%);
          right: 15%;color: #FFFFFF;"
          (click)="hlqcPageButton()"
          >关闭料箱</button>
          <button nz-button class="okandcancle"
          style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #e62e2e 0%, #ee0a0a 61.46%, #ca0707 100%);
          left: 15%;color: #FFFFFF;"
          (click)="stopHlqcPageButton()"
          >终止换料</button>
        </div>
      </div>
    </nz-modal>
    <!-- 终止换料弹框 -->
    <nz-modal [(nzVisible)]="CloseHLQC" nzTitle="终止换料弹框" (nzOnCancel)="handleCancel()" [nzOkText]=null nzWidth=50% nzCentered nzMaskClosable=false>
      <ng-container *nzModalContent>
        <div style="height: 200px;text-align: center;line-height:50px;font-size: 30px;">
          <div>
            <span style="font-size: 40px; color:#CD2626">注意！</span>终止换料会导致当前料仓内存放的料盒与当前生产的机型不匹配！
          </div>
          <div>
            <span style="font-size: 40px; color:#4ea11796">建议：</span>点击确认终止换料按钮后，进行【全部清仓】操作，然后再根据当前生产的机型进行【入库】操作
          </div>
        </div>
        
      </ng-container>

      <div *nzModalFooter>
        <div nz-row style="height: 80px;">
          <button nz-button class="okandcancle"
          style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #399DFF 0%, #0D78E1 61.46%, #297DCF 100%);
          right: 15%;color: #FFFFFF;"
          (click)="handleCancel()"
          >取消</button>
          <button nz-button class="okandcancle"
          style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #e62e2e 0%, #ee0a0a 61.46%, #ca0707 100%);
          left: 15%;color: #FFFFFF;"
          (click)="stopHLConfimButton()"
          >确定终止</button>
        </div>
      </div>
    </nz-modal>
    <!-- 清仓换料弹窗--换料 -->
    <nz-modal [(nzVisible)]="hlPage" nzTitle="请换料" (nzOnCancel)="handleCancel()" [nzOkText]=null nzWidth=50% nzCentered nzMaskClosable=false>
      <ng-container *nzModalContent>
        
        <div style="height: 300px;margin-left: 5%;">
          
          <div nz-row style="height: 10%;">
            <div nz-col nzSpan="5">当前智能料仓机型：</div>
            <div nz-col nzSpan="19">{{dqjx}}</div>
          </div>
          <div nz-row style="height: 10%;">
            <div nz-col nzSpan="5">换料机型：</div>
            <div nz-col nzSpan="19">{{hljx}}</div>
          </div>
          <div nz-row style="height: 10%;">
            <div nz-col nzSpan="5">剩余需要更换的料盒编码：</div>
            <div nz-col nzSpan="19"></div>
          </div>
          <div nz-row>
            <div nz-col nzSpan="24" style="color: blue;">{{sylhbm}}</div>
          </div>
          <div nz-row style="height: 10%;">
            <div nz-col nzSpan="24"></div>
          </div>
          <div nz-row style="height: 10%;">
            <div nz-col nzSpan="5">请扫描料盒编码：</div>
            <div nz-col nzSpan="19">
              <input type="text" id="boxCode" autocomplete="off" (click)="clearBox()" auto-focus [(ngModel)]="HLPageData.Box" (keyup.enter)="inputScan()"/>
            </div>
          </div>
          <div nz-row style="height: 10%;">
            <div nz-col nzSpan="5">数量：</div>
            <div nz-col nzSpan="19">
              <input type="number" id="HLQty" autocomplete="off" [(ngModel)]="HLPageData.qty"/>
            </div>
          </div>
          <div nz-row style="height: 30%;">

            <div nz-col nzSpan="3">
              <div style="top: 30%;position: absolute;font-size: large;">提示：</div>
            </div>
            <div nz-col nzSpan="21">
              <div style="top: 30%;position: absolute; font-size: large; color: #ff2f2f;">{{ts}}</div>
            </div>
          </div>

          <!-- <div class="hlPageClass" style="top: 10%;">当前智能料仓机型：</div>
          <div class="hlPageClass" style="top: 20%;">换料机型：</div>
          <div class="hlPageClass" style="top: 30%;">剩余需要更换的料盒编码：</div>
          <div class="hlPageClass" style="top: 50%;">料盒编码：</div>
          <div class="hlPageClass" style="top: 60%;">数量：</div>
          <div class="hlPageClass" style="top: 70%;">提示：</div> -->
        </div>
      </ng-container>

      <div *nzModalFooter>
        <div nz-row style="height: 80px;">
          <div nz-col nzSpan="6"><button nz-button class="okandcancle"
            style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #399DFF 0%, #0D78E1 61.46%, #297DCF 100%);
            left: 15%;color: #FFFFFF;"
            (click)="hlqcPageSubmitButton()"
            >提交</button></div>
          <div nz-col nzSpan="6"><button nz-button class="okandcancle"
            style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #399DFF 0%, #0D78E1 61.46%, #297DCF 100%);
            left: 15%;color: #FFFFFF;"
            (click)="hlqcPageResendButton()"
            >重新开箱</button></div>
          <div nz-col nzSpan="6"><button nz-button class="okandcancle"
            style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #399DFF 0%, #0D78E1 61.46%, #297DCF 100%);
            left: 15%;color: #FFFFFF;"
            (click)="hlqcPageResetButton()"
            >重置</button></div>
            <div nz-col nzSpan="6"><button nz-button class="okandcancle"
              style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #e62e2e 0%, #ee0a0a 61.46%, #ca0707 100%);
              left: 15%;color: #FFFFFF;"
              (click)="stopHlqcPageButton()"
              >终止换料</button></div>
            
        </div>
      </div>
    </nz-modal>
    <!-- 清仓换料弹窗--入库 -->
    <nz-modal [(nzVisible)]="rkPage" nzTitle="请入库" (nzOnCancel)="handleCancel()" [nzOkText]=null nzWidth=50% nzCentered nzMaskClosable=false>
      <ng-container *nzModalContent>
        
        <div style="height: 300px;margin-left: 5%;">
          
          <div nz-row style="height: 10%;">
            <div nz-col nzSpan="5">当前智能料仓机型：</div>
            <div nz-col nzSpan="19">{{hljx}}</div>
          </div>
          <div nz-row style="height: 10%;">
            <div nz-col nzSpan="5">剩余需要入库的料盒编码：</div>
            <div nz-col nzSpan="19"></div>
          </div>
          <div nz-row>
            <div nz-col nzSpan="24" style="color: blue;">{{sylhbm}}</div>
          </div>
          <div nz-row style="height: 10%;">
            <div nz-col nzSpan="24"></div>
          </div>
          <div nz-row style="height: 10%;">
            <div nz-col nzSpan="5">请扫描料盒编码：</div>
            <div nz-col nzSpan="19">
              <input type="text" id="boxCode" autocomplete="off" (click)="clearBox()" auto-focus [(ngModel)]="HLPageData.Box" (keyup.enter)="inputScan()"/>
            </div>
          </div>
          <div nz-row style="height: 10%;">
            <div nz-col nzSpan="5">数量：</div>
            <div nz-col nzSpan="19">
              <input type="number" id="HLQty" autocomplete="off" [(ngModel)]="HLPageData.qty"/>
            </div>
          </div>
          <div nz-row style="height: 30%;">

            <div nz-col nzSpan="3">
              <div style="top: 30%;position: absolute;font-size: large;">提示：</div>
            </div>
            <div nz-col nzSpan="21">
              <div style="top: 30%;position: absolute; font-size: large; color: #ff2f2f;">{{ts}}</div>
            </div>
          </div>

          <!-- <div class="hlPageClass" style="top: 10%;">当前智能料仓机型：</div>
          <div class="hlPageClass" style="top: 20%;">换料机型：</div>
          <div class="hlPageClass" style="top: 30%;">剩余需要更换的料盒编码：</div>
          <div class="hlPageClass" style="top: 50%;">料盒编码：</div>
          <div class="hlPageClass" style="top: 60%;">数量：</div>
          <div class="hlPageClass" style="top: 70%;">提示：</div> -->
        </div>
      </ng-container>

      <div *nzModalFooter>
        <div nz-row style="height: 80px;">
          <div nz-col nzSpan="6"><button nz-button class="okandcancle"
            style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #399DFF 0%, #0D78E1 61.46%, #297DCF 100%);
            left: 15%;color: #FFFFFF;"
            (click)="hlqcPageSubmitButton()"
            >提交</button></div>
          <div nz-col nzSpan="6"><button nz-button class="okandcancle"
            style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #399DFF 0%, #0D78E1 61.46%, #297DCF 100%);
            left: 15%;color: #FFFFFF;"
            (click)="hlqcPageResendButton()"
            >重新开箱</button></div>
          <div nz-col nzSpan="6"><button nz-button class="okandcancle"
            style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #399DFF 0%, #0D78E1 61.46%, #297DCF 100%);
            left: 15%;color: #FFFFFF;"
            (click)="hlqcPageResetButton()"
            >重置</button></div>
            <div nz-col nzSpan="6"><button nz-button class="okandcancle"
              style="background: radial-gradient(63.11% 63.11% at 31.97% 19.67%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 61.98%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #e62e2e 0%, #ee0a0a 61.46%, #ca0707 100%);
              left: 15%;color: #FFFFFF;"
              (click)="stopHlqcPageButton()"
              >终止换料</button></div>
            
        </div>
      </div>
    </nz-modal>
    <!-- 入库选择机型 -->
    <nz-modal [(nzVisible)]="selectJX" nzTitle="入库选择机型" (nzOnCancel)="handleCancel()" [nzOkText]=null nzWidth=30% nzCentered nzMaskClosable=false>
      <ng-container *nzModalContent>
        <div *ngFor="let jx of jxList">
          
          <button (click)="confirmJX(jx)" class="css_btn_class" style="width: 100%;">{{jx}}</button>
          <div style="height: 2px;"></div>
        </div>
      </ng-container>

      <div *nzModalFooter>
        
      </div>
    </nz-modal>
    <!-- 更换机型二次确认 -->
    <nz-modal [(nzVisible)]="RequestConfirmjx"  (nzOnCancel)="handleCancel()" [nzOkText]=null nzWidth=50% nzCentered>
      <ng-container *nzModalContent>
        <div nz-row style="height: 100px;">
          <div nz-col nzSpan="4"><img style="position: absolute; size: 90%; height: 90%;" src="assets/警示.svg" ></div>
          <div nz-col nzSpan="20"><span style="position: absolute; font-size: 32px; line-height: 44px;top: 25%;">确定更换{{confirmjx}}，是否继续？</span></div>
        </div>
      </ng-container>
      <div *nzModalFooter>
        <div nz-row style="height: 80px;">
          <div nz-col nzSpan="6"></div>
          <div nz-col nzSpan="6"></div>
          <div nz-col nzSpan="6">
            <button nz-button nzType="default" (click)="handleCancel()" class="okandcancle">否</button>
          </div>
          <div nz-col nzSpan="6">
            <button nz-button nzType="primary" (click)="changeJX(confirmjx)" class="okandcancle">是</button>
          </div>
        </div>
      </div>
    </nz-modal>
    <router-outlet></router-outlet>
  </body>

